<template>
  <view class="layout">
    <!-- 导航栏 -->
    <view class="navbar">
      <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px' }"></view>
      <view class="titleBar" :style="{ height: getTitleBarHeight() + 'px', marginLeft: getLeftIconLeft() + 'px' }">
        <view class="title">
          一键成大片
        </view>
      </view>
    </view>
    <!-- 填充区域 -->
    <view class="fill" :style="{ height: getNavBarHeight() + 'px' }"></view>
    <!-- 内容区域 -->
    <view class="content">
      <view class="icon-grid">
        <view class="icon-item" v-for="(item, index) in items" :key="index" @click="navigateToPage(item.label)">
          <text class="icon">{{ item.icon }}</text>
          <text class="label">{{ item.label }}</text>
          <view class="neon-effect" />
        </view>
      </view>
    </view>
    <!-- 标签栏 -->
    <view class="tag-bar">
      <view class="tag-item" v-for="(tag, index) in tags" :key="index" :class="{ 'tag-active': currentIndex === index }" @click="changeTab(index)">
        {{ tag }}
      </view>
    </view>
    <!-- 图片瀑布流 -->
    <view class="card-grid" @scroll="handleScroll">
      <!-- 使用v-for动态生成卡片 -->
      <view class="card" v-for="(card, index) in cardsData" :key="index" @click="goDetails(card)">
        <view class="card-image" :style="{ backgroundImage: `url('${card.image}')` }">
          <view class="card-type">{{ card.type }}</view>
        </view>
        <view class="card-text">{{ card.description }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight, getLeftIconLeft } from "@/utils/system.js";
import { ApigetVidoesByPage } from '/pages/api/video.js'

// 定义小盒子的数据
const items = ref([
  { icon: '🔄', label: '我的作品' },
  { icon: '📷', label: '图生视频' },
  { icon: '✍️', label: '文生视频' }
]);

const query = ref({
  pageNum: 1,
  size: 20,
  type: "热门"
});

const cardsData = ref([]);
const tags = ref(['热门', '文生视频', '图生视频']);
const currentIndex = ref(0);

const getVdieos = async () => {
  let res = await ApigetVidoesByPage(query.value);
  if (query.value.pageNum === 1) {
    cardsData.value = res;
  } else {
    cardsData.value = [...cardsData.value, ...res];
  }
};

const changeTab = (index) => {
  currentIndex.value = index;
  query.value.type = tags.value[index];
  query.value.pageNum = 1;
  getVdieos();
};

const handleScroll = (event) => {
  const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    if (cardsData.value.length === query.value.size * query.value.pageNum) {
      query.value.pageNum += 1;
      getVdieos();
    }
  }
};

const navigateToPage = (label) => {
  let url = '';
  switch(label) {
    case '我的作品':
      url = '/pages/tool/video/work'; 
      break;
    case '图生视频':
      url = `/pages/tool/video/generation`; 
      break;
    case '文生视频':
      url = `/pages/tool/video/generation`;
      break;
    default:
      console.log('未知的页面');
      return;
  }
  uni.navigateTo({
    url: url
  });
};

const goDetails = (item) => {
  const queryString = encodeURIComponent(JSON.stringify(item));
  uni.navigateTo({
    url: `/pages/tool/video/details?data=${queryString}`
  });
};

onMounted(() => {
  getVdieos();
});
</script>

<style lang="scss" scoped>
.layout::-webkit-scrollbar {
  display: none;
}
.layout {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  background-color: #001a33;
  overflow: hidden;
  .content {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;
    .icon-grid {
      display: flex;
      justify-content: space-around;
      width: 100%;
      flex-wrap: wrap;
      gap: 30px;
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10rpx;
        padding: 20rpx;
        width: 30%;
        text-align: center;
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #002b5b, #001f4a);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        animation: float 2s ease-in-out infinite;
        .icon {
          font-size: 60rpx;
          color: #00f0ff;
          transition: text-shadow 0.3s ease;
          animation: glow 2s infinite alternate;
        }
        .label {
          margin-top: 10rpx;
          color: #00f0ff;
          font-size: 32rpx;
          transition: color 0.3s ease;
        }
        .neon-effect {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
          background: rgba(0, 240, 255, 0.2);
          z-index: -1;
          opacity: 0.5;
          transition: opacity 0.3s ease;
          animation: neon 2s infinite alternate;
        }
        &:hover {
          transform: translateY(-5px) scale(1.05);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
          .icon {
            text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff;
          }
          .label {
            color: #00f0ff;
          }
          .neon-effect {
            opacity: 1;
          }
        }
      }
    }
  }
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    background-color: #001a33;
    .titleBar {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 30rpx;
      .title {
        color: #333;
        font-size: 36rpx;
        font-weight: 700;
        letter-spacing: 2rpx;
        line-height: 1.5;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        background-image: linear-gradient(to right, #00f0ff, #0088ff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: gradient-move 3s ease infinite;
      }
    }
  }
  .fill {
    width: 100%;
  }
  .tag-bar {
    display: flex;
    justify-content: center;
    padding: 10rpx 0;
    transition: all 0.3s ease;
    background-color: #001a33;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    .tag-item {
      padding: 15rpx 40rpx;
      margin: 0 15rpx;
      border-radius: 10rpx;
      font-size: 30rpx;
      cursor: pointer;
      transition: all 0.3s ease;
      user-select: none;
      background: linear-gradient(to left, #002b5b, #001f4a);
      color: #00f0ff;
      text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      &.tag-active {
        background: linear-gradient(to left, #003e88, #002c6a);
        color: #fff;
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
      &:hover {
        background: linear-gradient(to left, #003e88, #002c6a);
        text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      }
    }
  }
  .card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20rpx;
    margin-top: 20rpx;
    margin-bottom: 60px;
    overflow-y: auto;
    .card {
      width: 48%;
      margin-bottom: 20px;
      border-radius: 15rpx;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      &:hover {
        transform: translateY(-5px);
      }
      .card-image {
        height: 300rpx;
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
        .card-type {
          position: absolute;
          top: 20rpx;
          right: 20rpx;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          padding: 8rpx 15rpx;
          border-radius: 10rpx;
          font-size: 24rpx;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
      }
      .card-text {
        padding: 5rpx;
        background-color: #fff;
        color: #333;
        font-size: 28rpx;
        text-align: justify;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
      }
    }
  }
}
@keyframes gradient-move {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes glow {
  from {
    text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff;
  }
  to {
    text-shadow: 0 0 20px #00f0ff, 0 0 30px #00f0ff;
  }
}
@keyframes neon {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
</style>